<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Netty-Websocket</title>
    <style type="text/css">
    textarea{
    	width: 520px;
    	height: 100px;
    }
    #responseText{
    	height: 300px;
    }
    </style>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.11.0/js/md5.min.js"></script>
    <script type="text/javascript">
	    Date.prototype.format = function(fmt) {           
	        var o = {           
	        "M+" : this.getMonth()+1, //月份           
	        "d+" : this.getDate(), //日           
	        "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时           
	        "H+" : this.getHours(), //小时           
	        "m+" : this.getMinutes(), //分           
	        "s+" : this.getSeconds(), //秒           
	        "q+" : Math.floor((this.getMonth()+3)/3), //季度           
	        "S" : this.getMilliseconds() //毫秒           
	        };           
	        var week = {           
	        "0" : "/u65e5",           
	        "1" : "/u4e00",           
	        "2" : "/u4e8c",           
	        "3" : "/u4e09",           
	        "4" : "/u56db",           
	        "5" : "/u4e94",           
	        "6" : "/u516d"          
	        };           
	        if(/(y+)/.test(fmt)){           
	            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));           
	        }           
	        if(/(E+)/.test(fmt)){           
	            fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);           
	        }           
	        for(var k in o){           
	            if(new RegExp("("+ k +")").test(fmt)){           
	                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));           
	            }           
	        }           
	        return fmt;           
	    }
        // by zhengkai.blog.csdn.net
        var socket;
        function connect(){
	        if(!window.WebSocket){
	            window.WebSocket = window.MozWebSocket;
	        }
	        if(window.WebSocket){
	        	var user = form.user.value;
	        	var key = form.key.value;
	        	if(isEmpty(user)){
	        		form.user.focus();
	        		return false;
	        	}
	        	if(isEmpty(key)){
	        		form.key.focus();
	        		return false;
	        	}
	        	form.btnOpen.disabled = true;
	        	var timestamp = new Date().getTime();
	        	console.log('timestamp='+timestamp);
	        	var str = 'timestamp='+timestamp+'&user='+user+'&key='+key;
	        	console.log('str='+str);
	        	var sign = md5(str);
	        	console.log('sign='+sign);
	        	var host = form.host.value;
	            socket = new WebSocket("ws://"+host+"/api/proxy?user="+user+"&timestamp="+timestamp+"&sign="+sign);
	            socket.onmessage = function(event){
	                var ta = document.getElementById('responseText');
	               	console.log(event.data);
	                var jo = JSON.parse(event.data);
	                ta.value += (new Date().format('yy/MM/dd HH:mm:ss') + '\r\n' + event.data+"\r\n");
	                if(jo.body === 'ping'){
		                setTimeout(function(){
		                	jo.body = 'pong';
		                	form.message.value = JSON.stringify(jo);
		                	send();
		                }, parseInt(form.timeout.value));
	                }
	            };
	            socket.onopen = function(event){
	                var ta = document.getElementById('responseText');
	                ta.value += "Netty-WebSocket服务器。。。。。。连接  \r\n";
	                form.btnSend.disabled=false;
	                form.btnOpen.disabled=true;
	                form.btnClose.disabled=false;
	                form.user.disabled=true;
	            };
	            socket.onclose = function(event){
	                var ta = document.getElementById('responseText');
	                ta.value += "Netty-WebSocket服务器。。。。。。关闭 \r\n";
	                form.btnSend.disabled=true;
	                form.btnOpen.disabled=false;
	                form.btnClose.disabled=true;
	                form.user.disabled=false;
	            };
	            socket.onerror = function(event){
	            	console.log(event);
	            	form.btnSend.disabled=true;
	            	form.btnOpen.disabled=false;
	                form.btnClose.disabled=true;
	                form.user.disabled=false;
	            };
	        }else{
	            alert("您的浏览器不支持WebSocket协议！");
	        }
        }
        function send(msg){
            if(!window.WebSocket){return;}
            if(socket.readyState == WebSocket.OPEN){
            	var body = msg? msg: form.message.value;
            	if(isEmpty(body)) {
            		alert('不能发送空消息！');
            		form.message.value = '';
            		return;
            	}
                socket.send(body);
                form.message.value = '';
            }else{
                alert("WebSocket 连接没有建立成功！");
            }
        }
        function disconnect(){
        	socket.close();
        }
        function isEmpty(s){
        	return /^\s*$/.test(s);
        }
        //setInterval(function(){ send(form.uid.value+':'+form.message.value) }, 3000);
    </script>
</head>
<body>
<form onSubmit="return false;" name="form">
    <h3>车场测试连接</h3>
    <hr color="black" />
    <div>
    <div><label>服务地址：</label><input type="text" name="host" value="192.168.0.175:12345" /></div>
    <div><label>车场编号：</label><input type="text" name="user" value="cszg" /></div>
    <div><label>车场密钥：</label><input type="text" name="key" value="71cfa1c59773ddfa289994e6d505bba3" /></div>
    <div><label>返回超时：</label><input type="number" name="timeout" value="2000" /></div>
    <input type="button" name="btnOpen" value="登录" onClick="connect()" />
    <input type="button" name="btnClose" value="断开连接" onClick="disconnect()" disabled/>
    </div>
    <p>控制台：<input type="button" value="清空" onClick="form.myconsole.value=''"/></p>
    <textarea id="responseText" name="myconsole" disabled="disabled"></textarea>
    <div>
    <p><label>发送消息</label></p>
    <textarea name="message" value="这里输入消息" style="rows: 5" ></textarea>
    <div>
    <input type="button" name="btnSend" value="发送消息" onClick="send()" disabled />
    </div>
    </div>
</form>
</body>
</html>